<%--
  Created by IntelliJ IDEA.
  Time: 3:38 PM
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!-- use EL-Expression-->
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- 引入CSS -->
    <link href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.login.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/h-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/h-ui/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/easyui/themes/default/easyui.css">
    <!-- 引入JS -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/h-ui/lib/icheck/jquery.icheck.min.js"></script>

<%--    <!-- 页面事件 -->--%>
<%--    <script type="text/javascript">--%>
<%--        $(function () {--%>
<%--            //点击图片切换验证码--%>
<%--            $("#vcodeImg").click(function () {--%>
<%--                this.src = "getVerifiCodeImage?t=" + new Date().getTime();--%>
<%--            });--%>
<%--            s--%>
<%--        })--%>
<%--    </script>--%>

    <!-- 页面事件 -->
    <script type="text/javascript">
        $(function () {
            //点击图片切换验证码
            $("#vcodeImg").click(function () {
                this.src = "getVerifiCodeImage?t=" + new Date().getTime();
            });
            //登录按钮事件
            $("#submit").click(function () {
                var data = $("#form").serialize();
                console.log(data);
                alert(data);
                //检查登录信息
                if ($('#text').val() == "") {
                    // $.messager.alert("提示", "请输入用户名 !", "warning");
                    alert("请输入用户名")
                    $.messager.alert("提示", "请输入用户名 !", "warning");
                }  if ($('#pwd').val() == "") {
                    alert("请输入密码")
                    $.messager.alert("提示", "请输入密码 !", "warning");
                }  if ($('#verifiCode').val() == "") {
                    alert("请输入验证码")
                    $.messager.alert("提示", "请输入验证码 !", "warning");
                } else {
                    //提交用户的登录表单信息
                    var data = $("#form").serialize();

                    $.ajax({
                        type: "post",
                        url: "login",
                        data: data,
                        dataType: "json",
                        success: function (data) {
                            if (data.success) {
                                window.location.href = "goSystemMainView";//进入系统主页面
                            } else {
                                $.messager.alert("提示", data.msg, "warning");
                                $("#vcodeImg").click();//切换验证码
                                $("input[name='vcode']").val("");//清空验证码输入框
                            }
                        }
                    });
                }
            });
            // //设置复选框
            // $(".skin-minimal input").iCheck({
            //     radioClass: 'iradio-blue',
            //     increaseArea: '25%'
            // });
        })
    </script>


    <style>
        * {
            margin: 0;
            padding: 0;
            /* 内减模式 */
            box-sizing: border-box;
        }

        body {
            background-color: #eff3f6;
        }

        .box {
            margin: 80px auto;
            width: 600px;
            /*height: 350px;*/
            height: 479px;
            background-color: #fff;
            border-radius: 5px;
        }

        .box .left {
            float: left;
            width: 300px;
            /*height: 350px;*/
            height: 479px;
            border-radius: 5px 0 0 5px;
            font-size: 12px;
            font-weight: bold;
            background-image: linear-gradient(#fff, #3b82ff);
        }

        .box .left .logo {
            width: 200px;
            margin: 40px auto;
        }

        .box .right {
            float: left;
            width: 300px;
            height: 479px;
            /*高度加的*/
            border-radius: 0 5px 5px 0;
        }

        .box .right h3 {
            padding-bottom: 10px;
        }

        .box .right .form {
            width: 200px;
            margin: 20px auto;
        }

        .box .right .text,
        .pwd {
            position: relative;
            margin-bottom: 10px;
            width: 200px;
            height: 30px;
            border: 1px solid #e8e8e8;
        }

        .box .right input {
            width: 170px;
            height: 25px;
            border: 0;
            outline: none;
        }

        .eye {
            position: absolute;
            top: 5px;
            right: 5px;
        }

        img input::placeholder {
            padding-left: 10px;
            color: #e8e8e8;
            opacity: 1;
        }

        .box .right select {
            width: 200px;
            height: 30px;
            font-size: 14px;
            border: 1px solid #e8e8e8;
        }
        #vcodeImg{
            margin-top: 10px;
        }
        .box .right .submit {
            /*margin-top: 20px;*/
            margin-top: 50px;
            width: 200px;
            height: 30px;
            color: #fff;
            border-radius: 5px;
            border-style: none;
            background-color: #3b82ff;
        }
    </style>
    <title>学生管理系统 | 登录页面 </title>
    <meta name="keywords" content="学生信息管理系统">
</head>

<body style="font-weight: lighter; ">

<%--<div class="loginWraper">--%>
<%--    <div id="loginform" class="loginBox">--%>

        <div class="box">
            <div class="left">
                <div class="logo">
                    <img src="${pageContext.request.contextPath}/image/portrait/logo.htm" alt="logo" style="width:60% ; vertical-align: middle;">
                    <span>学生信息管理系统</span>
                    <img src="${pageContext.request.contextPath}/image/portrait/swiper.htm" alt="" style="width:100%;">
                </div>
            </div>
            <div class="right">
                <div class="form">
                    <h3>用户登录</h3>
                    <form action="#" id="from" method="post">
                        <h5>账号</h5>
                        <div class="text">
                            <input type="text" placeholder="请输入账号" id="text" />
                        </div>
                        <h5>密码</h5>
                        <div class="pwd">
                            <input type="password" placeholder="请输入密码" id="pwd" />
                            <label for="pwd">
                                <img src="${pageContext.request.contextPath}/image/portrait/不可见.png" alt="" class="eye" id="eye"/>
                            </label>
                        </div>

                        <h5>身份</h5>
                        <select>
                            <option selected>请选择身份</option><!--默认显示-->
                            <option name="student">学生</option>
                            <option name="dormmanager">管理员</option>
                            <option name="admin">系统管理员</option>
                        </select>
                        <!-- 验证码 -->
                        <h5>验证码</h5>
                        <div class="text">
                            <input id="verifiCode" class="input-text radius size-L" name="verifiCode" type="text"
                                   placeholder="验证码"
                                   style="width: 200px;">
                            <img title="点击图片切换验证码哟 ~" id="vcodeImg" src="getVerifiCodeImage" alt="#" onclick="img()">
                        </div>

                        <input type="submit" id="submit" value="登录" class="submit">
                    </form>
                </div>
            </div>
        </div>
<%--    </div>--%>
<%--</div>--%>
</body>
</html>